<template>
  <div class="page-miH page-bgBack">
    <rTitle :type="'center'" :tit="'招工企业管理'" />
    <div class="xq-form-wrapper" style="padding: 24px">
      <div class="xq-form-search">
        <a-input-search allowClear v-model="name" placeholder="搜索招工企业名称" style="width: 200px" @search="onSearch" />
        <div style="text-align: right; margin-top: -32px">
          <a-space>
            <a-button class="mr4" @click="batchSelectVisible = true"> 同步企业数据 </a-button>
            <a-button type="primary" icon="file-text" @click="onShowModal"> 新建企业 </a-button>
          </a-space>
        </div>
      </div>
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          :row-selection="
            FormJson['config']['table']['extend']['batch']
              ? {
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange
                }
              : null
          "
          class="xq-form-content-table"
          @change="onTableChange"
        >
          <!-- 主要内容，表格，自定义 header -->
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- 主要内容，表格，自定义 td -->
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <span v-if="col.dataIndex === 'gmtCreate'" :key="index">
              {{ moment(text).format("YYYY-MM-DD") }}
            </span>
            <span v-else-if="col.dataIndex === 'personSize'" :key="index">
              <span v-if="text === 1">0-20人</span>
              <span v-if="text === 2">20-99人</span>
              <span v-if="text === 3">99-200人</span>
              <span v-if="text === 4">200-500人</span>
              <span v-if="text === 5">500-1000人</span>
              <span v-if="text === 6">1000人以上</span>
            </span>
            <span v-else-if="col.dataIndex === 'sourceType'" :key="index">
              <span v-if="text == 1">手动添加</span>
              <span v-if="text == 2">同步数据</span>
            </span>
            <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
              <a @click="showUpdateModal(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="deleteRecord(record)">删除</a>
            </span>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
    <delModal
      :visible.sync="delVisible"
      title="确定删除该招工企业吗？"
      desc="删除后将关闭该单位的所有招聘岗位，且无法重新打开"
      okText="删除"
      @onOk="onOk"
    />
    <batchSelectModal :visible.sync="batchSelectVisible" @upDate="onGetCompanyUnits" />
    <laborUnitModel :visible.sync="visible" :mType="mType" :id="id" :dataJson="dataJson" @upDate="onGetCompanyUnits" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getCompanyUnits, delCompanyUnits } from "./api";
import rTitle from "../component/rTitle";
import delModal from "../component/delModal";
import batchSelectModal from "./component/batchSelectModal";
import laborUnitModel from "./component/laborUnitModel";
// import moment from "moment";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  components: {
    rTitle,
    delModal,
    batchSelectModal,
    laborUnitModel
  },
  mixins: [curdMixin],
  data() {
    return {
      id: "",
      form: this.$form.createForm(this, {}),
      mType: true,
      visible: false,
      dataJson: {},
      spinning: false,
      tableData: [],
      name: "",
      total: 0,
      pageNo: 1,
      pageSize: 20,
      delVisible: false,
      batchSelectVisible: false,
      deleteRecordID: ""
    };
  },
  created() {
    this.onGetCompanyUnits();
    this.$store.commit("recruitment/isCancel", null);
  },
  methods: {
    async onGetCompanyUnits() {
      try {
        this.visible = false;
        this.spinning = true;
        const { data } = await getCompanyUnits({
          name: this.name,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetCompanyUnits();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetCompanyUnits();
    },
    deleteRecord(e) {
      this.deleteRecordID = e.id;
      this.delVisible = true;
    },
    async onOk() {
      try {
        await delCompanyUnits(this.deleteRecordID);
        if (this.tableData.length === 1) {
          this.pageNo = 1;
        }
        this.onGetCompanyUnits();
        this.$notification["success"]({
          message: "删除成功"
        });
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    onShowModal() {
      this.mType = true;
      this.visible = true;
    },
    showUpdateModal(e) {
      let v = [];
      if (e.address) v = e.address.split(",");
      this.id = e.id;
      this.mType = false;
      this.visible = true;
      this.dataJson = {
        name: e.name,
        logo: e.logo,
        socCity: v[0] || null,
        socCityName: v[1] || null,
        legalPerson: e.legalPerson,
        companyTelephone: e.companyTelephone,
        companyEmail: e.companyEmail,
        address: v[2] || null,
        properties: e.properties || undefined,
        companyIndustryFirst: e.companyIndustryFirst || undefined,
        personSize: e.personSize || undefined,
        officialWebsite: e.officialWebsite,
        profile: e.profile,
        logos: e.logo
      };
    },
    onSearch() {
      this.pageNo = 1;
      this.pageSize = 20;
      this.onGetCompanyUnits();
    }
  }
};
</script>

<style lang="scss" scoped>
.dnone {
  ::v-deep .ant-form-item-required::before {
    display: none;
  }
}
</style>
